import React from "react";
import Link from "components/Link";
// import "antd-mobile/lib/tab-bar/style/index.css";
import s from "./style.scss";
import cur1Png from "assets/images/foot_icon1.png"
import cur2Png from "assets/images/foot_icon2.png"
import cur3Png from "assets/images/foot_icon3.png"
import cur4Png from "assets/images/foot_icon4.png"
import yaoPng from "assets/images/yao_btn.png"
let config = {
  navs: [
    { link: "/", icon: cur1Png, title: "首页", key: 1 },
    { link: "/projectList", icon: cur2Png, title: "列表", key: 2 },
    { link: "/game", icon: yaoPng, title: "摇一摇", key: 3 },
    { link: "/invite", icon: cur3Png, title: "分享", key: 4 },
    { link: "/my", icon: cur4Png, title: "我的", key: 5 }
  ]
};
import TweenOne from "rc-tween-one";
let animation =[{zIndex:103,width: "0.52rem",height: "0.52rem",scale: 0.7, duration: 500  },
{repeat: 1, duration: 500 ,width: "0.52rem",height: "0.52rem",scale: 1,zIndex:103,}] ;
let info ={paused:false}
export default ({ navs }) => (
  
  <div style={{ height: "0.55rem" }}>
    <div className={`${s.amTabBarBar} ${s.amTabBarBottom}`}>
      <div
        role="tablist"
        className={`${s.amTabBarBar}`}
        style={{ backgroundColor: "white" }}
      >
        {config.navs.map((n, i) => (
          <Link
            href={n.link}
            onlyActiveOnIndex
            key={n.key}
            className={`${s.amTabBarTab} ${s.link}`}
            activeClassName={`color1`}
          >
          {i==2?<div className={`${s.amTabBarTabIcon} ${s.gameItem} `}>
                {/* <i className={`i ${n.icon} `} /> */}
                <div className={`${s.gameTop}`}></div>
                <div className={`${s.gameTopBlcok}`}></div>
                <TweenOne
                animation={animation}
                paused={info.paused}
                className={`iconImg`}
                component="img"
                src={n.icon}
              >
                </TweenOne>
              </div>:<div>
              <div className={`${s.amTabBarTabIcon}`}>
                {/* <i className={`i ${n.icon} `} /> */}
                <img src={n.icon} className={`iconImg`}/>
              </div>
              <p className={`${s.amTabBarTabTitle} ${s.mg0}`}>{n.title}</p>
            </div>}
            
          </Link>
        ))}
      </div>
    </div>
  </div>
);
